<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>待办工作台</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
      iframe {
        width: 100%;
        height: calc(100% - 30px);
        border: 0;
      }
      .window-btns {
        display: flex;
        height: 30px;

        align-items: center;
        justify-content: flex-end;
        padding: 0 4px;
      }
      .window-btns > button {
        border: none;
        height: 20px;
        width: 40px;
        padding: 0 8px;
        line-height: 20px;
        border-radius: 4px;
        background-color: #fff;
        transition: all 0.2s;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .window-btns > button:hover {
        background-color: #e1e1e1;
      }
      #controller-bar {
        flex: 1;
        height: 30px;
        -webkit-app-region: drag;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <section class="window-btns">
        <div id="controller-bar"></div>
        <button type="button" id="window-min">
          <svg
            width="24"
            height="24"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect width="48" height="48" fill="white" fill-opacity="0.01" />
            <path
              d="M10.5 24L38.5 24"
              stroke="#999"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
        <button type="button" id="window-max">
          <svg
            width="24"
            height="24"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M34 12H14C12.8954 12 12 12.8954 12 14V34C12 35.1046 12.8954 36 14 36H34C35.1046 36 36 35.1046 36 34V14C36 12.8954 35.1046 12 34 12Z"
              stroke="#999"
              stroke-width="2"
            />
          </svg>
        </button>
        <button type="button" id="window-close">
          <svg
            width="24"
            height="24"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <rect width="48" height="48" fill="white" fill-opacity="0.01" />
            <path
              d="M14 14L34 34"
              stroke="#999"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M14 34L34 14"
              stroke="#999"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </section>
      <iframe src="http://127.0.0.1:3001"></iframe>
    </div>

    <script>
      const ipc = require('electron').ipcRenderer;
      document.getElementById('window-max').addEventListener('click', () => {
        ipc.send('window-max');
      });
      document.getElementById('window-min').addEventListener('click', () => {
        ipc.send('window-min');
      });
      document.getElementById('window-close').addEventListener('click', () => {
        ipc.send('window-close');
      });
    </script>
  </body>
</html>
